<template>
  <div class="login-container" style="height:100vh;background-image:linear-gradient(135deg,#1352F2,#3C82F5);overflow:hidden;">
    <el-container style="padding:30px;">
      <el-header>
        <el-row :gutter="10">
          <el-col :span="3">
            <img src="/imgs/login/logo.png" style="height: 50px;">
          </el-col>
          <el-col :span="1">
            <img src="/imgs/login/auto.png" style="height: 50px;">
          </el-col>
          <el-col :span="1">
            <img src="/imgs/login/verticalLine.png" style="height: 50px;">
          </el-col>
          <el-col :span="19">
            <span style="color:#fff;font-size:30px;font-weight:bold;">营销运营系统</span>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row :gutter="40">
          <el-col :span="16">
            <div class="login-banner">
              <img src="/imgs/login/bg.png" style="width:100%;margin-top:60px;">
            </div>
          </el-col>
          <el-col :span="8">
            <el-card class="login-card" style="margin-top:80px;">
              <div class="card-header">
                <h3 style="text-align:center;">用户登录</h3>
              </div>
              <el-form :model="user" :rules="rules" ref="formRef" label-position="top">
                <el-form-item prop="role">
                  <el-select v-model="user.role" placeholder="请选择登录角色" clearable>
                    <el-option label="平台视角" value="platform">
                      <i class="el-icon-user" style="margin-right:8px;"></i>平台视角
                    </el-option>
                    <el-option label="商家视角" value="merchant">
                      <i class="el-icon-shop" style="margin-right:8px;"></i>商家视角
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户名">
                  <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input placeholder="请输入密码" type="password" v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item class="remember-me">
                  <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
                </el-form-item>
                <el-form-item>
                  <el-button
                      type="primary"
                      style="width:100%;height:46px;"
                      @click="handleLogin"
                      :loading="loading"
                  >
                    登录
                  </el-button>
                </el-form-item>
              </el-form>
              <div class="card-footer">
                <div style="color:#666;text-align:center;font-size:14px;padding:10px 0;">
                  还没有账号? <router-link to="/register" style="color:#1352F2;">立即注册</router-link>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <div class="footer-text">
          <p>© 2025 营销运营系统 版权所有</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
/*import {ref} from "vue";

const user = ref({username:'',password:''});
const login = ()=>{
  console.log(user.value);
}*/
  import {ref} from "vue";
  import {useRouter} from 'vue-router';
  import {ElMessage} from 'element-plus';

  const router = useRouter();

  // 静态用户数据
  const staticUser = {
  username: '姜琪11',
  password: '123456'
};

  const user = ref({username: '', password: '', role: ''});
  const rememberMe = ref(false);
  const loading = ref(false);
  const formRef = ref(null);

  // 表单验证规则
  const rules = {
  role: [{required: true, message: '请选择登录角色', trigger: 'change'}],
  username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
  password: [{required: true, message: '请输入密码', trigger: 'blur'}]
};

  const handleLogin = () => {
  formRef.value.validate((valid) => {
    if (!valid) return;

    loading.value = true;

    // 模拟API请求延迟
    setTimeout(() => {
      if (user.value.username === staticUser.username &&
          user.value.password === staticUser.password) {
        // 登录成功处理
        if (rememberMe.value) {
          localStorage.setItem('rememberedUser', JSON.stringify({
            username: user.value.username,
            role: user.value.role
          }));
        }

        // 设置登录状态
        localStorage.setItem('isAuthenticated', 'true');

        ElMessage.success('登录成功');

        // 直接跳转到用户管理页面
        router.push('/user');
      } else {
        ElMessage.error('用户名或密码错误');
      }

      loading.value = false;
    }, 800);
  });
};

  // 检查记住的登录信息
  const checkRememberedUser = () => {
  const remembered = localStorage.getItem('rememberedUser');
  if (remembered) {
  const userData = JSON.parse(remembered);
  user.value.username = userData.username;
  user.value.role = userData.role;
  rememberMe.value = true;
}
};

  // 初始化时检查记住的登录信息
  checkRememberedUser();
</script>

<style scoped>


</style>
